<template>
  <div class="flex flex-col gap-4 flex-1">
    <!-- 顶部统计卡片 -->
    <div class="grid grid-cols-4 gap-4 bg-white p-3 rounded-lg">
      <el-card v-for="stat in statistics" :key="stat.label" shadow="hover">
        <div class="flex items-center justify-between">
          <div class="flex flex-col">
            <span class="text-gray-500 text-sm">{{ stat.label }}</span>
            <span class="text-2xl font-bold mt-2" :class="stat.color">{{ stat.value }}</span>
          </div>
          <el-icon :size="40" :class="stat.iconColor">
            <component :is="stat.icon" />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区域 -->
    <el-tabs v-model="activeTab" class="flex-1 bg-white p-3 rounded-lg">
      <!-- 患者评价管理 -->
      <el-tab-pane label="患者评价" name="reviews">
        <div class="bg-white p-3 rounded-lg">
          <div class="flex justify-between mb-4">
            <el-radio-group v-model="reviewFilter" size="large">
              <el-radio-button :value="'all'">全部评价</el-radio-button>
              <el-radio-button :value="'pending'">待审核</el-radio-button>
              <el-radio-button :value="'approved'">已通过</el-radio-button>
            </el-radio-group>
            <el-button type="primary" @click="handleExportReviews">导出评价</el-button>
          </div>

          <el-table :data="reviews" border stripe>
            <el-table-column type="expand">
              <template #default="props">
                <div class="p-4">
                  <p class="text-gray-600">{{ props.row.content }}</p>
                  <div class="mt-2 flex gap-2">
                    <el-image 
                      v-for="(img, index) in props.row.images" 
                      :key="index"
                      :src="img"
                      :preview-src-list="props.row.images"
                      class="w-20 h-20 object-cover rounded"
                    />
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="patientName" label="患者姓名"/>
            <el-table-column prop="department" label="就诊科室"/>
            <el-table-column prop="doctor" label="主治医生"/>
            <el-table-column prop="rating" label="评分">
              <template #default="{ row }">
                <el-rate v-model="row.rating" disabled />
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="评价时间"/>
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="getReviewStatusType(row.status)">
                  {{ getReviewStatusLabel(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="{ row }">
                <el-button 
                  v-if="row.status === 'pending'"
                  type="success" 
                  link 
                  @click="handleApproveReview(row)"
                >
                  通过
                </el-button>
                <el-button 
                  v-if="row.status === 'pending'"
                  type="danger" 
                  link 
                  @click="handleRejectReview(row)"
                >
                  拒绝
                </el-button>
                <el-button type="primary" link @click="handleShareReview(row)">
                  分享
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 推荐奖励计划 -->
      <el-tab-pane label="推荐奖励" name="rewards">
        <div class="bg-white p-4 rounded-lg">
          <div class="flex justify-between mb-4">
            <h3 class="text-lg font-bold">奖励计划设置</h3>
            <el-button type="primary" @click="handleCreateReward">新增奖励规则</el-button>
          </div>

          <el-table :data="rewardRules" border stripe>
            <el-table-column prop="name" label="规则名称"/>
            <el-table-column prop="type" label="奖励类型">
              <template #default="{ row }">
                <el-tag :type="getRewardTypeTag(row.type)">
                  {{ getRewardTypeLabel(row.type) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="points" label="奖励积分"/>
            <el-table-column prop="conditions" label="获得条件">
              <template #default="{ row }">
                <div class="flex flex-col gap-1">
                  <el-tag 
                    v-for="(condition, index) in row.conditions" 
                    :key="index"
                    size="small"
                    effect="plain"
                  >
                    {{ condition }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-switch
                  v-model="row.status"
                  :active-value="'active'"
                  :inactive-value="'inactive'"
                  @change="handleToggleRewardStatus(row)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleEditReward(row)">
                  编辑
                </el-button>
                <el-button type="danger" link @click="handleDeleteReward(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 推荐记录 -->
        <div class="bg-white p-4 rounded-lg mt-4">
          <div class="flex justify-between mb-4">
            <h3 class="text-lg font-bold">推荐记录</h3>
            <div class="flex gap-2">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-button type="primary" @click="handleExportReferrals">
                导出记录
              </el-button>
            </div>
          </div>

          <el-table :data="referralRecords" border stripe>
            <el-table-column prop="referrer" label="推荐人"/>
            <el-table-column prop="newPatient" label="新患者"/>
            <el-table-column prop="department" label="就诊科室"/>
            <el-table-column prop="visitDate" label="就诊日期"  />
            <el-table-column prop="rewardType" label="奖励类型">
              <template #default="{ row }">
                <el-tag :type="getRewardTypeTag(row.rewardType)">
                  {{ getRewardTypeLabel(row.rewardType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="points" label="获得积分" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="getReferralStatusType(row.status)">
                  {{ getReferralStatusLabel(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="{ row }">
                <el-button 
                  v-if="row.status === 'pending'"
                  type="primary" 
                  link 
                  @click="handleConfirmReferral(row)"
                >
                  确认发放
                </el-button>
                <el-button type="primary" link @click="handleViewReferralDetail(row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 奖励规则表单对话框 -->
    <Drawer
      v-model="showRewardDialog"
      :title="editingReward.id ? '编辑奖励规则' : '新增奖励规则'"
      size="500px"
      @confirm="handleConfirmReward"
    >
      <el-form :model="editingReward" label-width="100px">
        <el-form-item label="规则名称">
          <el-input v-model="editingReward.name" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="奖励类型">
          <el-select v-model="editingReward.type" placeholder="请选择奖励类型" class="w-full">
            <el-option label="积分奖励" value="points" />
            <el-option label="优惠券" value="coupon" />
            <el-option label="实物礼品" value="gift" />
          </el-select>
        </el-form-item>
        <el-form-item label="奖励积分">
          <el-input-number v-model="editingReward.points" :min="0" />
        </el-form-item>
        <el-form-item label="获得条件">
          <div v-for="(condition, index) in editingReward.conditions" :key="index" class="mb-2">
            <div class="flex gap-2">
              <el-input v-model="editingReward.conditions[index]" placeholder="请输入获得条件" />
              <el-button type="danger" circle @click="removeCondition(index)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>
          <el-button type="primary" link @click="addCondition">
            <el-icon><Plus /></el-icon>
            添加条件
          </el-button>
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Plus, Star, Medal, ChatLineRound, Present } from '@element-plus/icons-vue'
import Drawer from '@/components/common/Drawer.vue'

// 页面状态
const activeTab = ref('reviews')
const reviewFilter = ref('all')
const dateRange = ref([])

// 统计数据
const statistics = ref([
  {
    label: '本月评价数',
    value: '328',
    icon: 'ChatLineRound',
    color: 'text-blue-500',
    iconColor: 'text-blue-200'
  },
  {
    label: '平均评分',
    value: '4.8',
    icon: 'Star',
    color: 'text-yellow-500',
    iconColor: 'text-yellow-200'
  },
  {
    label: '推荐人数',
    value: '156',
    icon: 'Medal',
    color: 'text-green-500',
    iconColor: 'text-green-200'
  },
  {
    label: '奖励发放',
    value: '￥15,600',
    icon: 'Present',
    color: 'text-red-500',
    iconColor: 'text-red-200'
  }
])

// 评价数据
const reviews = ref([
  {
    id: '1',
    patientName: '张三',
    department: '内科',
    doctor: '李医生',
    rating: 5,
    content: '医生态度很好，治疗效果显著，整体服务非常满意！',
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg'
    ],
    createTime: '2024-03-15 14:30',
    status: 'pending'
  },
  // ... 更多评价数据
])

// 奖励规则数据
const rewardRules = ref([
  {
    id: '1',
    name: '首次推荐奖励',
    type: 'points',
    points: 100,
    conditions: [
      '成功推荐1名新患者就诊',
      '新患者完成首次就诊'
    ],
    status: 'active'
  },
  // ... 更多奖励规则
])

// 推荐记录数据
const referralRecords = ref([
  {
    id: '1',
    referrer: '李四',
    newPatient: '王五',
    department: '骨科',
    visitDate: '2024-03-16',
    rewardType: 'points',
    points: 100,
    status: 'pending'
  },
  // ... 更多推荐记录
])

// 编辑状态
const showRewardDialog = ref(false)
const editingReward = ref({
  id: '',
  name: '',
  type: '',
  points: 0,
  conditions: ['']
})

// 状态处理函数
const getReviewStatusType = (status) => {
  const types = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return types[status]
}

const getReviewStatusLabel = (status) => {
  const labels = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return labels[status]
}

const getRewardTypeTag = (type) => {
  const tags = {
    points: 'success',
    coupon: 'warning',
    gift: 'danger'
  }
  return tags[type]
}

const getRewardTypeLabel = (type) => {
  const labels = {
    points: '积分奖励',
    coupon: '优惠券',
    gift: '实物礼品'
  }
  return labels[type]
}

const getReferralStatusType = (status) => {
  const types = {
    pending: 'warning',
    confirmed: 'success',
    expired: 'info'
  }
  return types[status]
}

const getReferralStatusLabel = (status) => {
  const labels = {
    pending: '待发放',
    confirmed: '已发放',
    expired: '已过期'
  }
  return labels[status]
}

// 评价管理方法
const handleApproveReview = (row) => {
  ElMessageBox.confirm('确定通过该评价吗？', '提示', {
    type: 'warning'
  }).then(() => {
    row.status = 'approved'
    ElMessage.success('评价已通过')
  })
}

const handleRejectReview = (row) => {
  ElMessageBox.confirm('确定拒绝该评价吗？', '提示', {
    type: 'warning'
  }).then(() => {
    row.status = 'rejected'
    ElMessage.success('评价已拒绝')
  })
}

const handleShareReview = (row) => {
  ElMessage.success('评价分享功能待实现')
}

const handleExportReviews = () => {
  ElMessage.success('评价导出功能待实现')
}

// 奖励规则管理方法
const handleCreateReward = () => {
  editingReward.value = {
    id: '',
    name: '',
    type: '',
    points: 0,
    conditions: ['']
  }
  showRewardDialog.value = true
}
// 编辑奖励规则
const handleEditReward = (row) => {
  editingReward.value = { ...row }
  showRewardDialog.value = true
}
// 删除奖励规则
const handleDeleteReward = (row) => {
  ElMessageBox.confirm('确定删除该奖励规则吗？', '提示', {
    type: 'warning'
  }).then(() => {
    rewardRules.value = rewardRules.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  })
}
// 切换奖励规则状态
const handleToggleRewardStatus = (row) => {
  ElMessage.success(`规则状态已${row.status === 'active' ? '启用' : '停用'}`)
}
// 添加条件
const addCondition = () => {
  editingReward.value.conditions.push('')
}
// 删除条件
const removeCondition = (index) => {
  editingReward.value.conditions.splice(index, 1)
}
// 确认奖励规则
const handleConfirmReward = () => {
  ElMessage.success('奖励规则确认')
  rewardRules.value.push(editingReward.value)
  showRewardDialog.value = false
}
// 推荐记录管理方法
const handleConfirmReferral = (row) => {
  ElMessageBox.confirm('确定发放该推荐奖励吗？', '提示', {
    type: 'warning'
  }).then(() => {
    row.status = 'confirmed'
    ElMessage.success('奖励已发放')
  })
}
// 查看推荐记录详情
const handleViewReferralDetail = (row) => {
  ElMessage.success('查看详情功能待实现')
}
// 导出推荐记录
const handleExportReferrals = () => {
  ElMessage.success('记录导出功能待实现')
}
</script>